<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header {
            display: flex;
            align-items: center;
            background: white;
            width: 100%;
            height: 150px;
            border-radius: 12px;
        }

        .headerLeft {
            display: flex;
            align-items: center;
            height: 90px;
            width: 60%;
            border-radius: 12px;
        }

        .headerLeft img {
            height: 60px;
            width: 60px;
        }

        .headerRight {
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 90px;
            width: 40%;
            border-radius: 12px;
        }


        .center {
            background: white;
            width: 100%;
            height: 100vh;
            border-radius: 12px;
            margin-top: 20px;
        }

        .centerTop {
            width: 98%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-content: center;
            margin-left: 10px;
        }

        .centerTopRight {

        }

        .centerTopRight p {
            display: inline;
            line-height: 50px;
            font-family: 仿宋;
            font-size: 12px;
        }

        .centerCenter {
            width: 98%;
            height: calc(100vh - 80px);
            margin-left: 10px;
            margin-top: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .centerCenterImg img {
            width: 100px;
            height: 100px;
            margin-left: 120px;
        }

        .centerCenterImg p {
            text-align: center;
            color: #3636367c;
        }



        .centerCenterCreate {
            height: 150px;
            width: 100%;
            display: flex;
            margin-left: 10px;
        }

        .centerCenterCreate img {
            height: 150px;
            width: 110px;
            border-radius: 4px;
        }

        .centerContent {
            width: 100%;
            margin-left: 20px;
        }

        .manage {
            margin-right: 25px;
            width: 250px;
            display: flex;
            justify-content: space-around;
        }
    </style>

</head>
<body>
<div id="worktable">
    <div class="header">
        <div class="headerLeft">
            <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/8172eh7uhfps/serial_author/afternoon.gif" alt="下午好">
            <div>
                <p>下午好,{{ userInfo.author }}</p>
                <p style="font-family:仿宋; font-size: 12px">今天是<span style="color: skyblue">胖虎</span>陪伴你的第{{userInfo.existTime+1}}天,加油努力码字吧!
                </p>
            </div>
        </div>
        <div class="headerRight">
            <div>
                <p style="font-family:仿宋; font-size: 12px">粉丝数</p>
                <p style="font-weight: bold">{{userInfo.follower}}</p>
            </div>
            <div>
                <p style="font-family:仿宋; font-size: 12px">累计创作字数</p>
                <p style="font-weight: bold">{{userInfo.totalCount}}</p>
            </div>
        </div>
    </div>


    <div class="center">
        <div class="centerTop">
            <p style="font-weight: bold">小说</p>
            <div class="centerTopRight">
                <p @click="addBookHandle()" style="cursor: pointer">创建新书</p>
                <p>|</p>
                <p @click="allBookHandle()" style="cursor: pointer">查看全部</p>

            </div>
        </div>
        <div class="centerCenter" v-if="book.id==null">
            <div class="centerCenterImg">
                <img src="../../images/login/phyd.jpg" alt="胖虎">
                <p>记录灵感和创意,开启属于你的写作世界,并持之以恒</p>
                <div style="display: flex;justify-content: center">
                    <el-row>
                        <el-button type="primary" round @click="addBookHandle()" style="cursor: pointer">去写作</el-button>
                    </el-row>
                </div>
            </div>
        </div>

        <div class="centerCenterCreate" v-if="book.id!=null">
            <el-image style="height: 150px;width: 110px;
                border-radius: 4px;cursor: pointer;"
                      :src="getImage(book.image)">
                <div slot="error" class="image-slot">
                    <img src="./../../images/icons/btn_back@2x.png"
                         style="height: 150px;width: 110px; border:none;">
                </div>
            </el-image>
            <div class="centerContent">
                <div style="">
                    <p>{{ book.name }}</p>
                    <p style="font-family: 仿宋;font-size: 12px;color: #3636367c;">
                        最近更新: 第{{ book.chapterNumber || 0 }}章&nbsp;{{ book.chapterTitle }}
                    </p>
                </div>
                <div style="display: flex;justify-content: space-between">
                    <p style="font-family: 仿宋;font-size: 12px;color: #3636367c;">
                        共{{ book.chapterNumber || 0 }}章&nbsp;&nbsp;|&nbsp;&nbsp;{{ book.totalCount || 0 }}字&nbsp;&nbsp;|&nbsp;&nbsp;{{
                            book.message
                        }}
                    </p>
                    <div class="manage">
                        <el-row>
                            <el-button round @click="editBookChapterHandle()">章节管理</el-button>
                            <el-button type="primary" round @click="addBookChapterHandle()">创建章节</el-button>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/book.js"></script>

<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script>
    new Vue({
        el: '#worktable',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 5,
                tableData: [],
                id: '',
                status: '',
                index: 0,
                userInfo: {},
                book: {}
            }
        },
        computed: {},
        created() {
            //这是生命周期函数 加载页面自动触发
            //然后就会自动调用init方法
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
            console.log(this.userInfo)
            const authorId = this.userInfo.id;
            const totalCount = window.localStorage.getItem("totalCount");
            if (totalCount != null){
                this.userInfo.totalCount = totalCount
            }
            this.init(authorId);
        },
        mounted() {
        },
        methods: {
            async init(authorId) {
                //获取最新作品信息
                fetchBook(authorId).then(res => {
                    if (String(res.code) === '200') {
                        this.book = res.data.data
                        console.log(this.book)
                    } else {
                        this.$message.error(res.msg || '系统错误')
                    }
                })
            },
            getImage(image) {
                return `/common/download?name=${image}`
            },
            handleEmployeeQuery() {
                this.page = 1;
                this.init();
            },
            // 添加新书
            addBookHandle() {
                window.parent.menuHandle({
                    id: '2',
                    url: '/author/page/book/add.html',
                    name: '创建作品'
                }, true)
            },
            // 添加章节
            addBookChapterHandle() {
                const bookId = this.book.id;
                window.parent.menuHandle({
                    id: '9',
                    url: '/author/page/bookManage/add.html?bookId='+bookId,
                    name: '创建章节'
                }, true)
            },
            // 管理章节
            editBookChapterHandle() {
                const bookId = this.book.id;
                window.parent.menuHandle({
                    id: '10',
                    url: '/author/page/bookManage/edit.html?bookId='+bookId,
                    name: '章节管理'
                }, true)
            },
            // 查看全部
            allBookHandle() {
                window.parent.menuHandle({
                    id: '2',
                    url: '/author/page/bookManage/list.html',
                    name: '创建作品'
                }, true)
            },
            // 全部操作
            handleSelectionChange(val) {
                let checkArr = []
                val.forEach((n) => {
                    checkArr.push(n.id)
                })
                this.checkList = checkArr
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            }
        }
    })
</script>
</body>
</html>